Computer Graphics Brera : : Esercitazioni : ❬ ❭

E.4 - Cinetismi e interattività

Silk

Obiettivo

Realizzare uno sketch che permetta di disegnare configurazioni geometriche complesse utilizzando un "pennello" dinamico.

Modalità

Possibilità e vincoli

Creare uno sketch che imposti...

La "pennellata" potrà essere costituita da una o più forme geometriche o anche da caratteri tipografici.

L'obiettivo dell'esercitazione NON è quello di sviluppare una versione povera di Photoshop ma di sperimentare le possibilità di generazione di configurazioni grafiche permesse dall'interazione e dai cinetismi.

Risoluzione del canvas

La risoluzione del canvas dovrà adattarsi a quella della finestra in cui viene eseguito lo sketch. Per l'adattamento dovranno essere usati le variabili windowWidth e windowHeight, il gestore dell'evento windowResized() e l'istruzione resizeCanvas(). Il gestore dell'evento windowResized() NON dovrà quindi essere tolto dallo sketch.
Per verificare nel Web Editor che tutto funzioni correttamente, si può allargare e stringere l'area di visualizzazione del canvas mentre lo sketch è in esecuzione: se lo sfondo occupa sempre l'intera area, vuol dire che il ridimensionamento viene gestito correttamente

Codice di base

Un esempio di codice minimo potrebbe essere:

function setup() {    
    createCanvas( windowWidth, windowHeight );
    cursor(CROSS);  // cambia cursore mouse
    // inizializzazioni
    background( 0 );
    stroke( 255, 64 );
}

function draw() {    
    if (mouseIsPressed) {
        // "pennellata"
        translate( mouseX, mouseY );
        rotate( frameCount/10.0 );
        line( 0,0, 80,0 ); 
    }
}

function windowResized() {
    resizeCanvas( windowWidth, windowHeight );
    background( 0 );  // con colore usato nel setup()
    // eventuali altre re-inizializzazioni
}

Consigli

Spunti grafici

Alcuni spunti possono essere forniti dai seguenti sketch:

* per la corretta esecuzione si può impostare la modalità Processing.js (click su OP code e poi su OP code in alto a destra)

Attraverso la pagina delle revisioni si possono vedere anche le esercitazioni di alcuni studenti degli scorsi anni.

Oscillazione dei parametri

Per far oscillare ciclicamente il valore di un parametro si possono usare le funzioni map() e sin(). Ad esempio, per far allargare e stringere continuamente una linea si può usare un codice come questo:

let dx = map( sin(frameCount/20),  -1, 1,  0, 50 );
line( -dx, 0,  dx, 0 );

Intervenendo sui valori evidenziati è possibile modificare la velocità dell'oscillazione [vedi 20] il valore minimo del parametro [vedi 0] e il valore massimo [vedi 50]. I valori -1 e 1 non vanno modificati perché sono il valore minimo e massimo restituiti dalla funzione sin().

Ovviamente le stesse funzioni si posso utilizzare anche per i parametri cromatici, ad esempio in questo modo:

let blu = map( sin(frameCount/30),  -1, 1,  128, 255 );
stroke( 255, 255, blu );
line( 0, 0,  80, 0 );

Per ottenere variazioni più complesse si consiglia di seguire i suggerimenti dati a lezione sulle oscillazione dei parametri e sul loro uso pratico.

Cancellazione del canvas

Per far cancellare tutto alla pressione del tasto 'Canc' o del tasto '←' (backspace) si può utilizzare il gestore dell'evento keyReleased():

function setup() {    
    // ...
}

function draw() {    
    // ...
}

function windowResized() {
    // ...
}

function keyReleased() {
    if (keyCode == DELETE || keyCode == BACKSPACE) {
        background(0);
    }
}

Salvataggio dell'immagine

Per salvare il contenuto del canvas è possibile aggiungere un else if che chiami l'istruzione save() alla pressione di un altro tasto, ad esempio:

function keyReleased() {
    if (keyCode == DELETE || keyCode == BACKSPACE) {
        background( 0 );
    } else if (key=='s' || key=='S') {
        save();
    }
}

Cursore del mouse

Nel setup() il cursore del mouse è stato sostituito con una croce per evidenziare la possibilità di interazione. Sul sito di p5.js si possono trovare indicazioni sulle altre forme impostabili attraverso l'istruzione cursor().

Istruzioni per l'uso

Per visualizzare eventuali possibilità di interazione con la tastiera, si può mostrare una miniguida nella parte bassa del canvas, ad esempio con:

function draw() {
    // ...

    push();
    resetMatrix();
    fill( 200 ); // colore testo
    stroke( 0 ); // contorno testo
    textAlign( CENTER,CENTER );
    text( "CANC=cancella S=salva X=...", 0,height-30, width,30 );
    pop();  
}

Evitare comunque lo sviluppo di un complesso strumento di disegno perché il merito dei risultati dev'essere prevalentemente di chi ha fatto l'esercitazione non di chi la usa.

Consegna

Lo sketch andrà consegnato, dopo l'aggiunta dell'anteprima (obbligatoria), seguendo le modalità indicate nel "compito" della Classroom del corso.

Prima di consegnare l'esercitazione si consiglia di verificare il caricamento dell'anteprima attraverso la pagina di verifica dello sketch e l'eventuale adattamento del canvas alla modifica delle dimensioni della finestra del browser.

Crediti: